<template>
	<view class="body" :style="{'height':height+'px'}" @tap="toBack">
		<text v-if="type==='destroy'" class="count-down">{{remainTime}}s</text>
		<image :src="imgUrl" mode="aspectFit"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId :0,
				imgUrl:'',
				height:0,
				remainTime:0,
				type:'',
				countDown:{}
			}
		},
		methods: {
			toBack(){
				clearInterval(this.countDown);
				uni.navigateBack({
					delta:1
				});
			},
			creartCountDown(){
				this.countDown=setInterval(()=>{
					this.remainTime--;
					if(this.remainTime===0){
						this.toBack();
					}
				},1000);
			}
		},
		onLoad(optios) {
			this.userId = optios.userId;
			this.imgUrl = optios.imgUrl;
			this.type = optios.type;
			uni.getSystemInfo({
				success: res => {
					this.height = res.windowHeight;
					if(this.type==='destroy'){
						this.remainTime = 30;
						clearInterval(this.countDown);
						this.creartCountDown();
					}
				}
			});
		}
	}
</script>

<style lang="less" scoped>
.body{
	position: relative;
	background-color: #000000;
	width: 100%;
	height: 100%;
	
	.count-down{
		position: absolute;
		top: 100rpx;
		right: 50rpx;
		color: #FFFFFF;
		font-size: 30rpx;
	}
	image{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 100%;
		height: 100%;
	}
}
</style>
